<template>
	<view class="my-order-page">
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		
		<view class="list">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"  :up="upOption">
				<view class="item" v-for="(item, i) in list" :key="item.id">
					<view class="top">
						<view class="left">订单号:{{item.order_id}}</view>
						<view class="right">{{item.statusTxt}}</view>
					</view>
					<view class="goods">
						<image class="img" :src="item.groupon.goods.pict_url"></image>
						<view class="detail">
							<view class="title two-line">
								<text class="num">{{item.groupon.current_num}}人团</text>
								{{item.groupon.goods.title}}
							</view>
							<view class="price">
								<text class="now-price">¥{{item.groupon.goods.actual_price}}</text>
								<text class="old-price">x 1</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="time">拼单时间:{{item.create_time}}</view>
						<view class="btns">
							<view>查看物流</view>
							<view>确认收货</view>
						</view>
					</view>
				</view>
				
				<!-- <view class="item">
					<view class="top">
						<view class="left">订单号:1568954521</view>
						<view class="right">待成团</view>
					</view>
					<view class="goods">
						<image class="img"></image>
						<view class="detail">
							<view class="title two-line">
								<text class="num">10人团</text>
								苹果13PRO超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全
							</view>
							<view class="price">
								<text class="now-price">¥6599.00</text>
								<text class="old-price">x 1</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="time">拼单时间:2021/05/06 10:22</view>
						<view class="btns">
							<view>查看物流</view>
							<view>确认收货</view>
						</view>
					</view>
				</view> -->
			</mescroll-body>
		</view>
		
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		data () {
			return {
				tabList: [
					{name: '待成团', status: '1'},
					{name: '未拼中', status: '2'},
					{name: '待发货', status: '3'},
					{name: '待收货', status: '4'},
					{name: '已完成', status: '5'},
				],
				current: 0,
				status: '',
				list: [],
				pagination: {
					page: 1,
					pageSize: 0,
					total: 0,
				},
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
			}
		},
		methods: {
			change(index) {
				this.current = index
				this.tabList.forEach((e, i) => {
					if (this.current === i) this.status = e.status
				})
				this.pagination.page = 1
				this.getData(this.pagination.page, this.status)
			},
			getData(page, status){
				this.$u.api.myGroupOrder({page, pageSize:20, status}).then(res => {
					this.mescroll.endByPage(res.data.length, res.pagination.total)
					if (res.data.length > 0) res.data.forEach(e => {
						switch (e.status) {
							case '1':
								e.statusTxt = '待成团'
								break
							case '2':
								e.statusTxt = '未拼中'
								break
							case '3':
								e.statusTxt = '待发货'
								break
							case '4':
								e.statusTxt = '待收货'
								break
							case '3':
								e.statusTxt = '已完成'
								break
						}
					})
					if (page == 1) {
						this.list = res.data
					} else {
						this.list = [...this.list, ...res.data]
					}
					this.pagination.page++
				})
			},
			upCallback() {
				this.getData(this.pagination.page)
			},
			downCallback() {
				this.pagination.page = 1
				this.mescroll.resetUpScroll()
			},
		}
	}
</script>

<style lang="less" scoped>
	.my-order-page {
		// display: flex;
		// flex-direction: column;
		height: 100vh;
		.list {
			// flex: 1;
			height: calc(~"100vh - 44px");
			width: 100%;
			// padding: 35rpx 25rpx;
			box-sizing: border-box;
			// background: #F9F9F9;
			background: #fff;
			.item + .item {
				// margin-top: 30rpx;
			}
			.item {
				margin: 30rpx 25rpx;
				background-color: #fff;
				width: 700rpx;
				box-sizing: border-box;
				box-shadow: 0 0 40rpx 0 #CCCCCC;
				border-radius: 10rpx;
				.top {
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: bold;
					padding: 30rpx 20rpx 24rpx 20rpx;
					border-bottom: 1px solid #eee;
					box-sizing: border-box;
					.left {
						color: #000;
					}
					.right {
						color: #2879FE;
						text-align: right;
					}
				}
				.goods {
					display: flex;
					margin: 0 10rpx;
					padding: 40rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;
					.img {
						width: 141rpx;
						height: 108rpx;
						margin-right:25rpx;
					}
					.detail {
						flex: 1;
						.title {
							font-size: 26rpx;
							color: #666;
							text {
								display: inline-block;
								vertical-align: top;
							}
							.num {
								background-color: #353743;
								color: #fff;
								font-size: 20rpx;
								padding: 4rpx 9rpx;
								margin-right: 9rpx;
								margin-top: 3rpx;
							}
						}
						.price {
							margin-top: 24rpx;
							.now-price {
								color: #FD8201;
								font-size: 34rpx;
								margin-right: 20rpx;
								font-family: SimHei;
							}
							.old-price {
								color: #ccc;
								font-size: 30rpx;
							}
						}
					}
				}
				.bottom {
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.time {
						font-size: 22rpx;
						color: #999;
					}
					.btns {
						flex: 1;
						text-align: right;
						view {
							display: inline-block;
							vertical-align: middle;
							padding: 10rpx 18rpx;
							border-radius: 25rpx;
							border: 1px solid #ccc;
							font-size: 24rpx;
							color: #666;
						}
						view + view {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
